<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../../compute/static/layui-v2.6.8/layui/css/layui.css">
<script src="../../compute/static/layui-v2.6.8/layui/layui.js"></script>
<body>
<!--        概览-->
<div style="color: #fff; padding: 30px 10px 0px 30px; font-size: 40px">概览</div>
<!--        信息-->
<div class="layui-fluid">
  <div class="layui-row layui-col-space40">
    <div class="layui-col-md6" style="padding: 10px 40px 0px 20px">
      <div style="background-color: #1F4661; padding: 30px 10px 30px 10px">
        <div class= "layui-font-20" style="color: #a1a9ae">名称</div>
        <div style="color: #fff; font-size: 40px;" align="center">{{ posts["name"] }}</div>
      </div>
    </div>
    <div class="layui-col-md6" style="padding: 10px 20px 0px 0px">
      <div style="background-color: #1F4661; padding: 30px 10px 30px 10px">
        <div class= "layui-font-20" style="color: #a1a9ae">版本</div>
        <div style="color: #fff; font-size: 40px;" align="center">{{ posts["version"] }}</div>
      </div>
    </div>
  </div>
</div>
<!--        资源-->
<div class="layui-fluid" style="padding: 10px 20px 20px 20px">
  <div class="layui-row layui-col-space40">
    <div class="layui-col-md6" style="padding: 10px 40px 0px 10px">
      <div style="background: #1F4661;padding: 30px 20px 30px 20px">
        <div style="color: #fff; padding: 0px 10px 10px 0px;font-size: 20px;">CPU(core) {{ posts["cpu-used"] }} / {{ posts["cpu-total"] }}</div>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes">
          <div class="layui-progress-bar layui-bg-blue" lay-percent= "{{ posts['cpu-usage'] }}"></div>
        </div>
      </div>
    </div>
    <div class="layui-col-md6" style="padding: 10px 20px 0px 0px">
      <div style="background: #1F4661;padding: 30px 10px 30px 20px">
        <div style="color: #fff; padding: 0px 10px 10px 0px;font-size: 20px;">Memory(Gi) {{ posts["memory-used"] }} / {{ posts["memory-total"] }}</div>
        <div class="layui-progress layui-progress-big" lay-showPercent="yes">
          <div class="layui-progress-bar layui-bg-blue" lay-percent="{{ posts['memory-usage'] }}"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--        数量-->
<div class="layui-fluid" style="padding: 0px 20px 40px 20px">
  <div class="layui-row layui-col-space40">

    <div class="layui-col-md3" style="padding: 0px 40px 0px 10px">
      <div style="background: #1F4661; height:60px; padding: 20px 10px 20px 10px">
        <div style="float: left; width: 30%;">
          <i class="layui-icon layui-icon-circle" style="font-size: 60px;font-weight:bolder ; color: #C1C144;"></i>
        </div>
        <div style="float: right; width: 70%;">
          <div class= "layui-row layui-font-20" style="color: #a1a9ae; padding: 0px 10px 10px" align="center">Nodes</div>
          <div class= "layui-row layui-font-20" style="color: #fff;" align="right">{{ posts["N-nodes"] }}</div>
        </div>
      </div>
    </div>

    <div class="layui-col-md3" style="padding: 0px 40px 0px 0px">
      <div style="background: #1F4661; height:60px; padding: 20px 10px 20px 10px">
        <div style="float: left; width: 30%;">
          <i class="layui-icon layui-icon-circle" style="font-size: 60px;font-weight:bolder ; color: #990000;"></i>
        </div>
        <div style="float: right; width: 70%;">
          <div class= "layui-row layui-font-20" style="color: #a1a9ae; padding: 0px 10px 10px" align="center">Namespaces</div>
          <div class= "layui-row layui-font-20" style="color: #fff;" align="right">{{ posts["N-namespaces"] }}</div>
        </div>
      </div>
    </div>

    <div class="layui-col-md3" style="padding: 0px 40px 0px 0px">
      <div style="background: #1F4661; height:60px; padding: 20px 10px 20px 10px">
        <div style="float: left; width: 30%;">
          <i class="layui-icon layui-icon-circle" style="font-size: 60px;font-weight:bolder ; color: green;"></i>
        </div>
        <div style="float: right; width: 70%;">
          <div class= "layui-row layui-font-20" style="color: #a1a9ae; padding: 0px 10px 10px" align="center">Pods</div>
          <div class= "layui-row layui-font-20" style="color: #fff;" align="right">{{ posts["N-pods"] }}</div>
        </div>
      </div>
    </div>

    <div class="layui-col-md3" style="padding: 0px 20px 0px 0px">
      <div style="background: #1F4661; height:60px; padding: 20px 10px 20px 10px">
        <div style="float: left; width: 30%;">
          <i class="layui-icon layui-icon-circle"style="font-size: 60px;font-weight:bolder ; color: #1290bf;"></i>
        </div>
        <div style="float: right; width: 70%;">
          <div class= "layui-row layui-font-20" style="color: #a1a9ae; padding: 0px 10px 10px" align="center">Services</div>
          <div class= "layui-row layui-font-20" style="color: #fff;" align="right">{{ posts["N-services"] }}</div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- event -->
<div style="color: #fff; padding: 10px 10px 10px 30px; font-size: 20px">事件</div>
  <div class="layui-fluid" style="padding: 0px 30px 0px 30px">
    <div class="layui-row" style="background: #1F4661">
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
                原因
            </div>
        </div>
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
                命名空间
            </div>
        </div>
        <div class="layui-col-md4" style="padding: 8px 0px 8px 8px">
          <div class= "layui-font-16" style="color: #fff">
              消息
          </div>
      </div>
      <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
          <div class= "layui-font-16" style="color: #fff">
              对象
          </div>
      </div>
      <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
        <div class= "layui-font-16" style="color: #fff">
            时间
        </div>
      </div>
    </div>
    <div style="border: 2px solid rgba(1, 227, 243, 0.822)"></div>
  </div>
  
  <div id="event" >
    {% for post in posts['events'] %}
    <div class="layui-fluid" style="padding: 0px 30px 0px 30px">
      <div class="layui-row" style="background: #1a1a1e">
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
          <div class= "layui-font-16" style="color: #fff">
              {{ post['reason'] }}
          </div>
        </div>
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
              {{ post['namespace'] }}
            </div>
        </div>
        <div class="layui-col-md4" style="padding: 8px 0px 8px 8px">
          <div class= "layui-font-16" style="color: #fff">
            {{ post['message'] }}
          </div>
        </div>
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
            <div class= "layui-font-16" style="color: #fff">
              {{ post['object'] }}
            </div>
        </div>
        <div class="layui-col-md2" style="padding: 8px 0px 8px 8px">
          <div class= "layui-font-16" style="color: #fff">
            {{ post['time'] }}
          </div>
        </div>
      </div>
      <div style="border: 0.5px solid silver"></div>
    </div>
    {% endfor %}
  </div>
</div>

</body>
</html>